    export default {
        name: "addbgsxMain",
        setup(props, { emit }) {
            const router = VueRouter.useRouter();
            const route = VueRouter.useRoute();
			const formData = reactive({ID: null,Title: '',Photo: '',Content:[{type: 'text',value: '',f: false}],IsOpen:true,IsTop:false});
			const option = ref({url: '',name: 'file',path: 'blog'});
			const formRef = ref();
			const formRules = reactive({
				Title: [{
						required: true,
						message: '请输入公告标题',
						trigger: 'blur'
					},
					{
						min: 5,
						max: 100,
						message: '长度在5到100个字符',
						trigger: 'blur'
					}
				],
				Photo: [{
					required: true,
					message: '请上传缩略图',
					trigger: 'change'
				}],
				Content: [{
					required: true,
					message: '请输入公告内容',
					trigger: 'blur'
				}]
			})

			onMounted(async () => {
				if (route.query.id) {
                    const res = await qtgetblog({id: route.query.id});
                    Object.assign(formData, res)
                    document.title = formData.Title;
				}
			})

			// 表单提交
			const submitForm = _.debounce(async () => {
				try {
					const valid = await formRef.value.validate()
					if (!valid) return
					formData.ID ? await updateblog(formData) : addblog(formData);
					ElMessage.success('保存成功')
					router.push({name: 'AdminBlog'})
				} catch (error) {
					ElMessage.error(error.message || '保存失败')
				}
			}, 300);

			// 取消编辑
			const cancelEdit = () => {
				ElMessageBox.confirm('确定放弃当前修改吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					router.back();
				})
			}
            
            return {
                formData,
                formRules,
                submitForm,
                cancelEdit,
                option,
                formRef
            };
        },
        
        template: `
	<el-card class="form-container">
		<el-form ref="formRef" :model="formData" :rules="formRules" label-position="top">
			<!-- 标题 -->
			<el-form-item label="标题" prop="Title">
				<el-input v-model="formData.Title" placeholder="请输入公告标题" clearable maxlength="100" show-word-limit />
			</el-form-item>

			<!-- 缩略图上传 -->
			<el-form-item label="缩略图" prop="Photo" required>
				<imgpicker v-model="formData.Photo" />
			</el-form-item>

			<!-- 开关组 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="开放阅读" prop="IsOpen">
						<el-switch v-model="formData.IsOpen" active-text="开启" inactive-text="关闭" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="置顶公告" prop="IsTop">
						<el-switch v-model="formData.IsTop" active-text="置顶" inactive-text="普通" />
					</el-form-item>
				</el-col>
			</el-row>

			<!-- 富文本编辑器 -->
			<el-form-item label="公告内容" prop="Content" required>
				<kzhedit v-model="formData.Content" :option="option" style="width:100%;" />
			</el-form-item>

    		<el-row justify="center">
                <el-col :span="8" style="text-align: center;margin: 20px;">
                    <el-button type="primary" size="large" style="margin-right:20px" @click="submitForm">保存公告</el-button>
                    <el-button @click="cancelEdit">取消返回</el-button>
                </el-col>
    		</el-row>

		</el-form>
	</el-card>
        `
    }